<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.1/theme-chalk/index.min.css">
  <style>
      html,
      body,
      #app,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
      ul, li {
          list-style: none;
          margin: 0;
          padding: 0;
      }
      .typhoon-list {
          position: absolute;
          top: 20px;
          right: 20px;
          background-color: white;
          border-radius: 4px;
          box-shadow: 0 0 3px #ccc;
          padding: 10px;
          min-height: 200px;
          overflow-y: auto;
      }
      .typhoon-list h3 {
          margin: 0;
          padding: 10px;
      }
      .typhoon-legend {
          position: absolute;
          bottom: 20px;
          left: 20px;
          z-index: 99;
          background-color: white;
          padding: 10px;
          list-style: none;
          margin: 0;
          font-size: 12px;
          border-radius: 5px;
      }
      .color-circle {
          display: inline-block;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          margin-right: 5px; }

      .color-line {
          display: inline-block;
          width: 20px;
          height: 0;
          margin-right: 3px;
          margin-bottom: 4px;
          border-bottom: 2px dashed #000; }
      .my-popup .mapboxgl-popup-content {
          background-color: white;
          margin: 0;
          padding: 0 8px 8px 8px;
          white-space: nowrap;
          font-size: 12px; }
      .my-popup .mapboxgl-popup-content h5 {
          margin: 0 0 3px 0;
          padding: 3px 0;
          font-size: 14px; }
      .my-popup .mapboxgl-popup-content label {
          display: inline-block;
          text-align: right;
          width: 65px; }
      .my-popup .mapboxgl-popup-tip {
          border-top-color: white !important; }
      .my-popup .mapboxgl-popup-close-button {
          color: white; }
      .typhoon-label {
          background-color: rgba(255, 255, 255, 0.65);
          border-radius: 5px;
          padding: 2px 5px;
          font-size: 12px;
          color: black; }
      .typhoon-label:after {
          top: 6px;
          border: solid transparent;
          content: " ";
          height: 0;
          width: 0;
          position: absolute;
          pointer-events: none; }
      .typhoon-label:after {
          border-right-color: rgba(255, 255, 255, 0.65);
          border-width: 5px;
          left: -10px; }
      @keyframes rotate {
          0% {
              transform: rotate(0deg); }
          100% {
              transform: rotate(360deg); } }
      .typhoon-image {
          overflow: hidden;
          display: none; }

      .typhoon-icon {
          width: 50px;
          height: 50px;
          background: url("data/typhoon.png");
          animation: rotate 1s linear infinite; }
  </style>
</head>
<body>
<div id="app">
  <div id="map"></div>
  <div
    v-loading="loading"
    class="typhoon-list">
    <el-table
      ref="multipleTable"
      :data="typhoonList"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="tfbh"
        label="台风编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="台风名称">
      </el-table-column>
    </el-table>
  </div>
  <ul class="typhoon-legend">
    <li style="padding-bottom: 5px;font-weight: bold;">
      台风图例
    </li>
    <li
      v-for="(value, key) in legendData.colorDict"
      :key="key">
        <span
          class="color-circle"
          :style="{background: value}"></span>
      {{ key }}
    </li>
    <li style="padding: 5px 0;font-weight: bold;">
      预报机构
    </li>
    <li
      v-for="(value, key) in legendData.lineColorDict"
      :key="key">
        <span
          class="color-line"
          :style="{borderColor: value}"></span>
      {{ key }}
    </li>
  </ul>
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.2/index.min.js"></script>
<script src="./js/proj4.js"></script>
<script src="./js/typhoon.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data() {
            return {
                map: null,
                typhoon: null,
                loading: true,
                typhoonList: [],
                showTyphoons: [],
                legendData: {
                    colorDict: {
                        '热带低压(TD)': '#20f634',
                        '热带风暴(TS)': '#2078fd',
                        '强热带风暴(STS)': '#eaf232',
                        '台风(TY)': '#eab434',
                        '强台风(STY)': '#e085f7',
                        '超强台风(Super TY)': '#ea2a34'
                    },
                    lineColorDict: {
                        '中国': '#ec5d72',
                        '中国香港': '#ec7cfe',
                        '中国台湾': '#ecaa65',
                        '日本': '#56f66e',
                        '美国': '#53dbfe',
                        '韩国': '#72a4ac',
                        '欧洲': '#4c54a6'
                    }
                }
            }
        },
        mounted() {
            this.init()
            Date.prototype.format = function(fmt) {
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) {
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                }
                for (var k in o) {
                    if (new RegExp("(" + k + ")").test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                    }
                }
                return fmt;
            };
        },
        methods: {
            init() {
                const that = this
                const libPath = 'http://localhost:8081/mapbox/'
                const style = {
                    "version": 8,
                    "name": "lzugis",
                    "sprite": libPath + "bank",
                    "glyphs": libPath + "fonts/mapbox/{fontstack}/{range}.pbf",
                    "sources": {
                        "nav": {
                            "type": "raster",
                            "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                            "tileSize": 256
                        }
                    },
                    "layers": [{
                        "id": "nav",
                        "type": "raster",
                        "source": "nav",
                        "minzoom": 0,
                        "maxzoom": 17
                    }]
                }
                const dom = document.getElementById('map');
                that.map = new mapboxgl.Map({
                    container: dom,
                    style: style,
                    center: [103.081163, 37.1612],
                    zoom: 3.5,
                    minZoom: 2,
                    maxZoom: 18
                });
                window.map = that.map
                map.on('load', () => {
                    // 1.初始化台风组件
                    that.typhoon = new Typhoon(map)
                    // 2.初始化台风列表
                    $.get('data/typhoon-list.json', res => {
                        that.typhoonList = res
                        that.loading = false
                    })
                })
            },
            handleSelectionChange(val) {
                this.showTyphoons = val;
            }
        },
        watch: {
            showTyphoons(newVal, oldVal) {
                // 判断显示和取消的台风
                newVal = newVal.map(item => item.tfbh)
                oldVal = oldVal.map(item => item.tfbh)
                // 新增台风
                for (let i=0;i<newVal.length;i++){
                    const tybh = newVal[i]
                    if(oldVal.indexOf(tybh) === -1) {
                        this.typhoon.showTyphoon(tybh)
                        break;
                    }
                }
                // 删除台风
                for (let i=0;i<oldVal.length;i++){
                    const tybh = oldVal[i]
                    if(newVal.indexOf(tybh) === -1) {
                        this.typhoon.hideTyphoon(tybh)
                        break;
                    }
                }
            }
        }
    })
</script>
</body>
</html>